<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Helper functions ---
        function drawMeter(x, y, radius, label) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.fillText(label, x, y);
        }

        function drawJunction(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 4, 0, 2 * Math.PI);
            ctx.fill();
        }

        // --- Draw components ---

        // 1. Guide Rail and Object M
        ctx.beginPath();
        ctx.moveTo(50, 50);
        ctx.lineTo(550, 50);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(250, 40);
        ctx.lineTo(250, 60);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(350, 40);
        ctx.lineTo(350, 60);
        ctx.stroke();
        ctx.strokeRect(250, 40, 100, 20);
        ctx.fillText('M', 300, 30);
        ctx.font = '20px "SimSun", "Songti SC"'; // Font for Chinese characters
        ctx.fillText('导轨', 500, 30);
        ctx.font = '20px Arial'; // Reset font

        // 2. Sliding Rheostat (Resistor R)
        ctx.strokeRect(100, 190, 400, 20);
        ctx.fillText('R', 300, 225);

        // 3. Slider P
        const sliderX = 300;
        ctx.beginPath();
        ctx.moveTo(sliderX, 60);
        ctx.lineTo(sliderX, 180);
        ctx.stroke();
        drawJunction(sliderX, 180);
        // Arrow for slider
        ctx.beginPath();
        ctx.moveTo(sliderX, 180);
        ctx.lineTo(sliderX, 190);
        ctx.moveTo(sliderX - 5, 185);
        ctx.lineTo(sliderX, 190);
        ctx.lineTo(sliderX + 5, 185);
        ctx.stroke();
        ctx.fillText('P', sliderX + 20, 170);

        // 4. Voltmeter V
        const voltmeterX = 100;
        const voltmeterY = 120;
        const meterRadius = 22;
        drawMeter(voltmeterX, voltmeterY, meterRadius, 'V');

        // 5. Ammeter A
        const ammeterX = 450;
        const ammeterY = 350;
        drawMeter(ammeterX, ammeterY, meterRadius, 'A');

        // 6. Power Source (Battery)
        const batteryY = 350;
        ctx.beginPath();
        ctx.moveTo(100, batteryY - 15); // Negative terminal (short)
        ctx.lineTo(100, batteryY + 15);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(120, batteryY - 22); // Positive terminal (long)
        ctx.lineTo(120, batteryY + 22);
        ctx.stroke();

        // 7. Switch S
        const switchY = 350;
        ctx.beginPath();
        ctx.moveTo(220, switchY);
        ctx.lineTo(240, switchY);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(220, switchY, 4, 0, Math.PI * 2);
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(260, switchY);
        ctx.lineTo(280, switchY);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(280, switchY, 4, 0, Math.PI * 2);
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(240, switchY);
        ctx.lineTo(260, switchY - 15); // Open switch
        ctx.stroke();
        ctx.fillText('S', 250, 375);

        // --- Draw Wires ---

        // Main circuit loop
        // Left side
        const leftWireX = 50;
        ctx.beginPath();
        ctx.moveTo(100, batteryY); // From battery negative
        ctx.lineTo(leftWireX, batteryY);
        ctx.lineTo(leftWireX, 200);
        ctx.lineTo(100, 200); // To resistor left
        ctx.stroke();
        drawJunction(leftWireX, 200);

        // Right side
        const rightWireX = 550;
        ctx.beginPath();
        ctx.moveTo(500, 200); // From resistor right
        ctx.lineTo(rightWireX, 200);
        ctx.lineTo(rightWireX, batteryY);
        ctx.lineTo(ammeterX + meterRadius, batteryY); // To ammeter right
        ctx.stroke();
        
        // Bottom wire
        ctx.beginPath();
        ctx.moveTo(ammeterX - meterRadius, batteryY); // From ammeter left
        ctx.lineTo(280, batteryY); // To switch right
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(220, batteryY); // From switch left
        ctx.lineTo(120, batteryY); // To battery positive
        ctx.stroke();

        // Voltmeter connections
        ctx.beginPath();
        ctx.moveTo(voltmeterX - meterRadius, voltmeterY); // From voltmeter left
        ctx.lineTo(leftWireX, voltmeterY);
        ctx.lineTo(leftWireX, 200); // To junction on left wire
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(voltmeterX + meterRadius, voltmeterY); // From voltmeter right
        ctx.lineTo(sliderX, voltmeterY);
        ctx.lineTo(sliderX, 180); // To slider junction
        ctx.stroke();

    </script>
</body>
</html>